<template>
  <div>
    <van-search
      shape="round"
      v-model="value"
      placeholder="请输入搜索关键词"
      @input="inputFn"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="resultList.length === 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 热搜关键词 -->
        <span
          class="hot_item"
          v-for="(obj, index) in hotArr"
          :key="index"
          @click="fn(obj.first)"
          >{{ obj.first }}</span
        >
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <SongItem
          v-for="obj in resultList"
          :key="obj.id"
          :name="obj.name"
          :author="obj.ar[0].name"
          :id="obj.id"
        ></SongItem> -->
        <van-cell
          center
          :title="obj.name"
          :label="obj.ar[0].name + '-' + obj.name"
          v-for="obj in resultList"
          :key="obj.id"
        >
        
          <template #right-icon>
            <van-icon name="play-circle-o" size="0.7rem" />
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
// 目标：铺设热搜关键字
// 1 铺设搜索框van-search组件，关键词标签和样式
// 2.找接口，api/search.js里定义获取搜索关键词的请求方法
// 3.引入到当前页面，调用接口拿到数据循环铺设页面
// 4.点击关键词把值赋予给van-search的v-model变量

import { hotSearchAPI, searchResultListAPI } from "@/api";
// import SongItem from "@/components/SongItem.vue";

export default {
  data() {
    return {
      value: "",
      // 热搜关键字
      hotArr: [],
      // 搜索结果
      resultList: [],
      // 加载中（状态）- 只有为false，才能触底后自动触发onload方法
      loading: false,
      // 未加载全部（如果设置为true，底部就不会再次执行unload，代表全部加载完成）
      finished: false,
      // 当前搜索结果的页码
      page: 1,
      // 输入框-防抖的定时器
      timer: null,
    };
  },
  async created() {
    const res = await hotSearchAPI();
    console.log(res);
    this.hotArr = res.data.result.hots;
  },
  methods: {
    async getListFn() {
      return await searchResultListAPI({
        keywords: this.value,
        limit: 20,
        offset: (this.page - 1) * 20,
        // async 修饰的函数 -> 默认返回一个全新promise对象
        // 这个promise对象的结果就是async函数内return值

        // 拿到getListFn的返回值用await提取结果
      });
    },

    async fn(val) {
      // 选中的关键词显示到搜索框里
      // 点击新关键词 - 可能有新的数据
      this.page = 1;
      this.finished = false;
      this.value = val;
      const res = await this.getListFn();
      console.log(res);
      this.resultList = res.data.result.songs;
    },
    // 输入框值改变
    async inputFn() {
      this.page = 1;
      // 目标：输入框-防抖： 输入框改变 - 逻辑代码 - 慢点执行
      // 防抖：计时n秒，最后一次执行，如果再次触发，重新计时
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        this.page = 1;
        this.finished = false;
        if (this.value.length === 0) {
          // 搜索关键词如果没有，就把搜索结果清空阻止网络请求发送（提前return）
          this.resultList = [];
          return;
        }
        const res = await this.getListFn();
        console.log(res);
        // 没有数据时
        if (res.data.result.songs === undefined) {
          this.resultList = [];
        } else {
          this.resultList = res.data.result.songs;
        }

        this.loading = false;
      }, 900);
    },
    async onLoad() {
      this.page++;
      const res = await this.getListFn();
      console.log(res);
      // 没有更多数据时
      if (res.data.result.songs === undefined) {
        // 只要设置为true，list再次触发都不会执行onLoad函数（显示“没有更多数据”）
        this.finished = true;
        return;
      }
      this.resultList = [...this.resultList, ...res.data.result.songs];
      // 数据加载完毕，保证下一次还能触发onload
      this.loading = false;
    },
  },
  // components: {
  //   SongItem,
  // },
};
</script>
<!-- 目标： 铺设关键字 -->

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>